<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能旅游数据仪表板 - 技术栈分析文档</title>
    <style>
        body {
            font-family: "Microsoft YaHei", "SimSun", Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            border-bottom: 3px solid #3498db;
            padding-bottom: 10px;
            text-align: center;
        }
        h2 {
            color: #34495e;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 5px;
            margin-top: 30px;
        }
        h3 {
            color: #2980b9;
            margin-top: 25px;
        }
        h4 {
            color: #27ae60;
            margin-top: 20px;
        }
        ul {
            padding-left: 20px;
        }
        li {
            margin-bottom: 8px;
        }
        strong {
            color: #e74c3c;
        }
        .project-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-left: 4px solid #3498db;
            margin: 20px 0;
        }
        .tech-item {
            background-color: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
        }
        .code-block {
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            font-family: "Courier New", monospace;
            font-size: 14px;
            overflow-x: auto;
            white-space: pre;
        }
        .version {
            color: #7f8c8d;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <h1>智能旅游数据仪表板 - 技术栈分析文档</h1>

    <h2>项目概述</h2>
    <div class="project-info">
        <p><strong>项目名称</strong>: 索奇智慧文旅数据大屏</p>
        <p><strong>项目类型</strong>: 智能旅游数据可视化仪表板</p>
        <p><strong>开发模式</strong>: 现代化前端单页应用 (SPA)</p>
    </div>

    <h2>核心技术栈</h2>

    <h3>前端框架</h3>
    <div class="tech-item">
        <p><strong>Vue 3</strong> <span class="version">(v3.2.47)</span></p>
        <ul>
            <li>采用最新的 Composition API</li>
            <li>支持 <code>&lt;script setup&gt;</code> 语法糖</li>
            <li>响应式数据管理</li>
            <li>组件化开发架构</li>
        </ul>
    </div>

    <h3>构建工具</h3>
    <div class="tech-item">
        <p><strong>Vite</strong> <span class="version">(v4.3.2)</span></p>
        <ul>
            <li>现代化构建工具</li>
            <li>快速热重载 (HMR)</li>
            <li>ES模块原生支持</li>
            <li>优化的生产构建</li>
        </ul>
    </div>

    <h3>路由管理</h3>
    <div class="tech-item">
        <p><strong>Vue Router</strong> <span class="version">(v4.2.1)</span></p>
        <ul>
            <li>Vue 3 官方路由解决方案</li>
            <li>支持动态路由</li>
            <li>路由守卫功能</li>
        </ul>
    </div>

    <h3>数据可视化技术</h3>

    <h4>2D 图表可视化</h4>
    <div class="tech-item">
        <p><strong>ECharts</strong> <span class="version">(v5.6.0)</span></p>
        <ul>
            <li>百度开源的企业级图表库</li>
            <li>丰富的图表类型</li>
            <li>高性能渲染</li>
            <li>交互式数据展示</li>
        </ul>
    </div>

    <h4>3D 可视化技术</h4>
    <div class="tech-item">
        <p><strong>Three.js</strong> <span class="version">(v0.155.0)</span></p>
        <ul>
            <li>业界领先的 WebGL 3D 库</li>
            <li>3D 场景渲染</li>
            <li>材质和光照系统</li>
            <li>3D 模型加载支持</li>
        </ul>
    </div>

    <div class="tech-item">
        <p><strong>Three.interactive</strong> <span class="version">(v1.7.0)</span></p>
        <ul>
            <li>Three.js 交互增强插件</li>
            <li>3D 对象交互处理</li>
            <li>事件系统集成</li>
        </ul>
    </div>

    <h4>地理数据可视化</h4>
    <div class="tech-item">
        <p><strong>D3-geo</strong> <span class="version">(v3.1.0)</span></p>
        <ul>
            <li>D3.js 地理投影模块</li>
            <li>地图数据处理</li>
            <li>地理坐标转换</li>
            <li>地理可视化支持</li>
        </ul>
    </div>

    <h3>动画技术</h3>
    <div class="tech-item">
        <p><strong>GSAP</strong> <span class="version">(v3.12.2)</span></p>
        <ul>
            <li>高性能动画库</li>
            <li>时间轴动画控制</li>
            <li>复杂动画序列</li>
            <li>硬件加速优化</li>
        </ul>
    </div>

    <h3>样式预处理</h3>
    <div class="tech-item">
        <p><strong>Sass</strong> <span class="version">(v1.62.1)</span></p>
        <ul>
            <li>CSS 预处理器</li>
            <li>变量和混入支持</li>
            <li>嵌套规则</li>
            <li>模块化样式管理</li>
        </ul>
    </div>

    <h3>类型支持</h3>
    <div class="tech-item">
        <p><strong>@types/three</strong> <span class="version">(v0.152.0)</span></p>
        <ul>
            <li>Three.js TypeScript 类型定义</li>
            <li>开发时类型检查</li>
            <li>IDE 智能提示</li>
        </ul>
    </div>

    <h3>构建插件</h3>
    <div class="tech-item">
        <p><strong>@vitejs/plugin-vue</strong> <span class="version">(v4.1.0)</span></p>
        <ul>
            <li>Vue 单文件组件支持</li>
            <li>模板编译</li>
            <li>样式处理</li>
        </ul>
    </div>

    <h3>目录设计</h3>
    <div class="code-block">src/
├── mini3d/          # 自定义3D引擎模块
│   ├── components/  # 3D组件
│   ├── core/        # 核心功能
│   ├── plugins/     # 插件系统
│   ├── shader/      # 着色器
│   └── utils/       # 工具函数
├── router/          # 路由配置
├── utils/           # 通用工具
├── views/           # 页面组件
└── assets/          # 静态资源</div>

</body>
</html>